﻿<Page x:Class="WpfAnimation.PagePointAnimationUsingPath"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
     d:DesignHeight="350" d:DesignWidth="880"
	Title="PagePointAnimationUsingPath">

    <Canvas>
        <Path Fill="Blue"  Canvas.Left="20" Canvas.Top="20">
            <Path.Data>
                <!-- The EllipseGemetry specifies the shape and position of the Ellipse. The
          Center property is animated, causing the Ellipse to animate across the screen-->
                <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
            Center="10,100" RadiusX="15" RadiusY="15" />
            </Path.Data>
            <Path.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseDown">
                    <BeginStoryboard Name="MyBeginStoryboard">
                        <Storyboard>
                            <!-- Animates the ellipse along the path. -->
                            <PointAnimationUsingPath
                  Storyboard.TargetName="MyAnimatedEllipseGeometry"
                  Storyboard.TargetProperty="Center"
                  Duration="0:0:5"  >
                                <PointAnimationUsingPath.PathGeometry>
                                    <PathGeometry 
                      Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"/>
                                </PointAnimationUsingPath.PathGeometry>
                            </PointAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Path.Triggers>
        </Path>
        <Path Stroke="Black" StrokeThickness="1" Canvas.Left="20" Canvas.Top="20">
            <Path.Data>
                <PathGeometry  Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"/>
            </Path.Data>
        </Path>
    </Canvas>
</Page>
